'use strict'
import React, { Component } from 'react';
import {
  TouchableOpacity,
  TouchableHighlight,
  Text,
  View,
  StyleSheet,
  Modal,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import * as defaultStyles from '../constants/DefaultStyles';
import { DatePicker } from 'rnkit-actionsheet-picker';
import FilterMenu from '../components/FilterMenu';
import { getNowFormatDate } from '../utils/DateAndTime';


export default class Menu extends Component {
  constructor(props) {
    super(props)
    console.log(props.code + props.stat);
    this.state = {
      dateText: '今天',
      datePickerMode: 'date',
      modalVisible: false,
      date: getNowFormatDate(''),
      code: props.code,
      stat: props.stat,
    }
  }
  _datePickerAction() {
    DatePicker.show({
      yearText: '年',
      monthText: '月',
      dayText: '日',
      datePickerMode: this.state.datePickerMode,
      onPickerConfirm: (selectedDate) => {
        this.state.date = selectedDate.replace(/-/g, '');
        let dateText =selectedDate;
        if (selectedDate === getNowFormatDate('-')) {
          dateText = '今天';
        }
        this.setState({
          dateText: dateText,
        })
        this.props.onChange(this.state.date, this.state.code, this.state.stat);
      },
      onPickerCancel: () => {
        console.log('date picker canceled');
      },
      onPickerDidSelect: (selectedDate) => {
        console.log(selectedDate);
      }
    })
  }
  render() {
    return (
      <View style={[this.props.style, {flexDirection: 'row'}]}>
        <Modal
          animationType={"slide"}
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => console.log('条件筛选窗口关闭')}
        >
          <TouchableHighlight style={{flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.3)'}}
                              onPress={() => this.setState({modalVisible: false})}>
            <View style={{flex: 1.3}} />
          </TouchableHighlight>
          <FilterMenu style={{flex: 1}} didSelected={(code, stat) => {
            this.state.code = code;
            this.state.stat = stat;
            this.props.onChange(this.state.date, this.state.code, this.state.stat);
            this.setState({modalVisible: false});
          }} code={this.state.code} stat={this.state.stat}/>
        </Modal>
        <TouchableOpacity style={[styles.btn, {borderRightWidth: 1, borderRightColor: '#F0F0F0'}]} onPress={() => this._datePickerAction()}>
          <Text style={styles.btnTitle}>{this.state.dateText + ' '}</Text>
          <Icon name={'caret-down'} color={'gray'} size={18}/>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.btn, {borderLeftWidth: 1, borderRightColor: '#F0F0F0'}]} onPress={() => this.setState({modalVisible: true})}>
          <Text style={styles.btnTitle}>{'筛选 '}</Text>
          <Icon name={'caret-down'} color={'gray'} size={18}/>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  btn: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: defaultStyles.WHITEOFBACKGROUND,
  },
  btnTitle: {
    color: 'gray',
    fontSize: 16,
  }
});